﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IQueryable<DAL.SysMenu>>" %>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>NotFound</title>
    <script src="../../Scripts/jquery-1.4.4-vsdoc.js" type="text/javascript"></script>
    <link href="../../Res/ludo-jquery-plugins-903ee53/treeTable/src/stylesheets/jquery.treeTable.css"
        rel="stylesheet" type="text/css" />
    <script src="../../Res/ludo-jquery-plugins-903ee53/treeTable/src/javascripts/jquery.treeTable.js"
        type="text/javascript"></script>
    <link href="../../Res/jqueryui186custom/css/ui-lightness/jquery-ui-1.8.6.custom.css"
        rel="stylesheet" type="text/css" />
    <link href="../../Res/ludo-jquery-plugins-903ee53/treeTable/doc/stylesheets/master.css"
        rel="stylesheet" type="text/css" />
    <script src="../../Res/jqueryui186custom/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
    <style type="text/css">
        .ui-button
        {
            margin: 2px 4px;
            padding: 2px;
            text-decoration: none;
            cursor: pointer;
            position: relative;
            text-align: center;
        }
        .ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error
        {
            padding: 4px;
        }
        .portlet
        {
            padding: 10px;
        }
        .portlet-header
        {
            padding: 4px;
            margin-bottom: 6px;
        }
    </style>
    <script type="text/javascript">

        $(document).ready(function () {
            $(".example").treeTable({
                initialState: "expanded"
            });

            // Drag & Drop Example Code
            $("#dnd-example .file, #dnd-example .folder").draggable({
                helper: "clone",
                opacity: .75,
                refreshPositions: true,
                revert: "invalid",
                revertDuration: 300,
                scroll: true
            });

            $("#dnd-example .folder").each(function () {
                $($(this).parents("tr")[0]).droppable({
                    accept: ".file, .folder",
                    drop: function (e, ui) {
                        $($(ui.draggable).parents("tr")[0]).appendBranchTo(this);

                        // Issue a POST call to send the new location (this) of the
                        // node (ui.draggable) to the server.
                        if ($(ui.draggable).parents("tr")[0].id != this.id) {
                            $.post("TreeTableMove", { id: $(ui.draggable).parents("tr")[0].id, pid: this.id },
                            function (data) {
                                //alert("返回结果: " + data);
                                window.location.href = "TreeTable";
                            });
                        }
                    },
                    hoverClass: "accept",
                    over: function (e, ui) {
                        if (this.id != $(ui.draggable.parents("tr.parent")[0]).id && !$(this).is(".expanded")) {
                            $(this).expand();
                        }
                    }
                });
            });

            // Make visible that a row is clicked
            $("table#dnd-example tbody tr").mousedown(function () {
                $("tr.selected").removeClass("selected"); // Deselect currently selected rows
                $(this).addClass("selected");
            });

            // Make sure row is selected when span is clicked
            $("table#dnd-example tbody tr span").mousedown(function () {
                $($(this).parents("tr")[0]).trigger("mousedown");
            });

            //删除记录
            $(".btn_delete").click(function () {
                if (confirm("您确定要删除这条记录吗？")) {
                    id = $(this).attr('categoryId'); //取记录ID
                    $.post("TreeTableDelete", { id: id },
                            function (data) {
                                if (data)
                                    $("#node-" + id).remove();
                                else
                                    alert("删除失败！");
                            });
                }
            });

            //读取记录信息
            $(".btn_edit").click(function () {
                id = $(this).attr('categoryId'); //取记录ID
                $.ajax({
                    //target address
                    url: "GetCategory/" + id,
                    //post transmission
                    type: "POST",
                    //data format:JSON 
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    //beforeSend: function() { },
                    success: function (result) {
                        var jsondata = eval('(' + result + ')').category;
                        if (jsondata != null) {
                            $.each(jsondata, function (i, item) {
                                $('#edit_id').val(item.id);
                                $('#title2').val(item.title);
                                $('#status2').val(item.status);
                                $('#kind2').val(item.kind);
                            });
                            $("#EditPanel").dialog('open');
                        }
                        else
                            alert("此记录不存在！");
                    }
                });
            });


            $(function () {
                $("#CreatePanel").dialog({
                    bgiframe: true,
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        '取  消': function () {
                            $(this).dialog('close');
                        },
                        '创  建': function () {
                            if ($("#title1").val() != "") {
                                $.post(
                                "CreateCategory", { title: $("#title1").val(), status: $("#status1").val(), kind: $("#kind1").val() },
                                function (data) {
                                    if (data) {
                                        $("#CreatePanel").dialog('close');
                                        window.location.href = "TreeTable";
                                    }
                                    else
                                        alert("创建失败！");
                                });
                            }
                            else
                            { alert("请输入分类名！"); }
                        }

                    }
                });

                $("#EditPanel").dialog({
                    bgiframe: true,
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        '取  消': function () {
                            $(this).dialog('close');
                        },
                        '保  存': function () {
                            if ($("#title2").val() != "") {
                                $.post(
                                "SaveCategory", { id: $("#edit_id").val(), title: $("#title2").val(), status: $("#status2").val(), kind: $("#kind2").val() },
                                function (data) {
                                    if (data) {
                                        $("#EditPanel").dialog('close');
                                        window.location.href = "TreeTable";
                                    }
                                    else
                                        alert("保存失败！");
                                });
                            }
                            else
                            { alert("请输入分类名！"); }
                        }

                    }
                });

                $("#btn-create").click(function () {
                    $("#CreatePanel").dialog('open');
                });

                $("#btn-create").hover(
			    function () {
			        $(this).addClass("ui-state-hover");
			    },
			    function () {
			        $(this).removeClass("ui-state-hover");
			    }
		        ).mousedown(function () {
		            $(this).addClass("ui-state-active");
		        })
		        .mouseup(function () {
		            $(this).removeClass("ui-state-active");
		        });
                $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
                .find(".portlet-header").addClass("ui-widget-header ui-corner-all")
                .find(".portlet-content").addClass("ui-widget-content");
            });
        });
  
    </script>
</head>
<body>
    <div class="portlet-content">
        <div style=" padding:20px;" id="CategoryDiv">
            <table style=" padding:20px;" class="example" id="dnd-example">
                <thead>
                    <tr>
                        <th style="width: 600px;">
                            Title
                        </th>
                        <th>
                            Status
                        </th>
                        <th>
                            Action
                        </th>
                    </tr>
                </thead>
                <tbody >
                    <% foreach (var item in Model)
                       { %>
                    <tr id="node--<%=item.Id %>" <%if(item.SysMenuId!=null){Response.Write("class='child-of-node--"+item.SysMenuId+"'");}else{Response.Write("class='parent'");}%>>
                        <td>
                             <span class="<%if(item.Url== null){Response.Write("file");}else{Response.Write("folder");} %>">
                                <%=Html.Encode(item.Name) %></span>
                        </td>
                        <td>
                            sss
                        </td>
                        <td>
                            sas
                        </td>
                    </tr>
                    <%} %>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
